<template>
	<div class="main">
		<!-- 概况页面 -->
		<div class="mainLeft">
			<div class="picBox">
				<div class="welcomeInfo">
					<span class="name">hello！{{ userName }}</span>
					<span class="text">欢迎来到同城货运管理系统，祝你每一天都有新的收获哦！</span>
				</div>
			</div>
			<!-- 快捷入口 -->
			<div class="title_box">
				<div class="title before">快捷入口</div>
			</div>
			<div class="shortcut" ref="shortcut" id="shortcut">
				<div class="shortcut_itemBox" v-for="item in shortcutArr" :key="item.title">
					<div class="shortcut_item" v-if="item.isShow == true" :key="item.title">
						<div class="shortcut_item_btn" @click="goToRoute(item, item.activeName)">
							<div class="iconfont_color2  iconStyle" :class="item.icon != null ? item.icon : ''">
								<div class="badge" v-if="item.infoNum != undefined && item.infoNum != '0'">
									<span class="badgeText">{{ item.infoNum > 99 ? '99' : item.infoNum }}</span>
								</div>
							</div>
							<span>{{ item.title }}</span>
						</div>
					</div>
				</div>





			</div>
		</div>
		<div class="mainRight">
			<div class="timeBox">
				<div class="dateTimeBox">
					<span class="hour">{{ time }}</span>
					<span class="date">{{ date }} 星期{{ week }}</span>
				</div>
			</div>
			<div class="noticeBox">
				<div class="noticeTitle before">通知</div>
				<ul class="list">
					<li class="message" v-for="item in noticData" :key="item.messageId">
						<div class="messageTitle">{{ item.headline }}</div>
						<div class="yearMonth">{{ item.createTime }}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import httpApi from "@/http";
	export default {
		data() {
			return {
				shortcutArr: [{
						icon: "icon-dairenzhengsiji",
						title: "待认证司机",
						infoNum: "0",
						link: "/driver/list",

					}, {
						icon: "icon-dairenzhengcheliang",
						title: "待认证车辆",
						infoNum: "0",
						link: "/vehicle/list",
					}, {
						icon: "icon-dairenzhenggongyingshang",
						title: "待认证供应商",
						infoNum: "0",
						link: "/supplierManagement/certifiedSupplier",
					}, {
						icon: "icon-daishenheyundan",
						title: "待审核运单",
						infoNum: "0",
						link: "/orderManagement/WaybillManagement",
						activeName: "second"
					}
					/* , {
					        icon: "icon-chengyunfukuandan",
					        title: "提现申请",
					        link: "/financialManagement/withdrawApply",
					      } */
					// {
					//   icon: "icon-daiduizhangsiji",
					//   title: "待对账司机",
					//  infoNum: "0",
					//   link: "/orderManagement/SettlementDoc",
					//   activeName:"first"
					// }
					, {
						icon: "icon-ziyingshoukuandan",
						title: "待付款运营商",
						infoNum: "0",
						link: "/orderManagement/SettlementDoc",
						activeName: "second"
					}, {
						icon: "icon-ziyingfukuandan",
						title: "待收款货主",
						infoNum: "0",
						link: "/orderManagement/SettlementDoc",
						activeName: "third"
					}, {
						icon: "icon-xinzengyunyingshang",
						title: "新增运营商",
						link: "/supplierManagement/supplierList/addSupplier",
					}, {
						icon: "icon-xinzenghuozhu",
						title: "新增货主",
						link: "/Carrier/acceptCarriage/AddCargoOwner",
					}, {
						icon: "icon-chuangjiandingdan",
						title: "创建订单",
						link: "/orderManagement/CarrierOrder/CreateCarrierOrder",
					}, {
						icon: "icon-dingdanchaxun",
						title: "订单查询",
						link: "/orderManagement/CarrierOrder",
					}, {
						icon: "icon-yundanchaxun",
						title: "运单查询",
						link: "/orderManagement/WaybillManagement",
					}, {
						icon: "icon-cuohedingdan",
						title: "撮合订单",
						link: "/orderManagement/MatchOrders",
					}, {
						icon: "icon-hetongguanli",
						title: "合同管理",
						link: "/contractManagement/List",
					}
				],
				/* 新增运营商，新增货主，创建订单，订单查询，运单查询，撮合订单，合同管理， */

				date: "", //日期
				time: "", //小时:分钟
				week: "", //星期
				userName: "", //用户名

				noticData: [], //消息通知
				ShortcutWidth: ''
			};
		},
		methods: {
			getDate() {
				// 项目安装了moment时间组件库 https://moment.nodejs.cn/docs/#/parsing/date/
				// js中写var moment = require('moment'); 然后调用moment中的方法

				const _this = this;
				var moment = require("moment");

				function getDateFn() {
					var week = moment().format("E");
					var weekArr = ["日", "一", "二", "三", "四", "五", "六"];
					var weekStr = weekArr.filter((str, index) => {
						return index == week ? weekArr[index] : "";
					});
					_this.week = weekStr[0];
					var date = moment().format("YYYY年MM月DD日");
					var time = moment().format("HH:mm");
					_this.date = date;
					_this.time = time;
					return getDateFn;
				}
				setInterval(getDateFn(), 1000); //立即执行一次,随和每隔一秒执行一次
			},
			init() {
				httpApi.loginApi.getUserInfo().then((res) => {
					// console.log('用户信息',res);
					this.userName = res.data.data.userName;
				});
			},
			async gotoUrl(item, i) {
				let res = await this.$http.loginApi.getRoutersbutton({
					component: item.link
				})
				sessionStorage.setItem('permissions', JSON.stringify(res.data.data))
				if (i == 1) {
					this.$router.push(item.link)
				} else {
					this.$router.push({
						path: item.link,
						query: {
							'active': item.activeName
						}
					})
				}
			},
			goToRoute(item, activeName) {
				// console.log(activeName);
				if (activeName == undefined) {
					this.gotoUrl(item, 1)
				} else if (activeName != null) {
					this.gotoUrl(item, 2)


				}
			},
			async cread() {
				let res = await this.$http.loginApi.indexNumber()
				let data = res.data.data

				data.forEach((item, i) => {
					this.shortcutArr[i].infoNum = item.number
				});

				this.shortcutArr = JSON.parse(JSON.stringify(this.shortcutArr))


			},
			getMessage() {
				let params = {
					port_type: "coreplatform",
				}
				httpApi.loginApi.getMessageNotice(params).then(res => {
					//console.log(res)
					if (res.data.code == 200) {
						res.data.data.forEach(item => {
							item.createTime = item.createTime.slice(0, 10)
						})
						//console.log(res.data.data)
						this.noticData = res.data.data
					}
				})
			},
			httpOverviewAuthority() {
				httpApi.loginApi.getOverviewAuthority().then(res => {
					console.log(res);

					this.shortcutArr.forEach((item, i) => {
						item.name = res.data.data[i].name
						item.isShow = res.data.data[i].isShow
					})
					console.log('入口', this.shortcutArr);

					this.shortcutArr = JSON.parse(JSON.stringify(this.shortcutArr))

				})
			},
			// 获取宽度
			async getShortcutWidth(Destroy) {

				let _this = this

				const resizeObserver = new ResizeObserver((entries) => {

					for (let entry of entries) {
						// console.log('计算宽');
						// console.log(entries);
						// _this.ShortcutWidth = _this.$refs.shortcut.offsetWidth
						_this.ShortcutWidth = entries[0].borderBoxSize[0].inlineSize
						// console.log(_this.ShortcutWidth);

						if (_this.$refs.shortcut != undefined) {
							_this.$refs.shortcut.style.setProperty('--ShortcutItemWidth', _this.ShortcutWidth /
								7 + 'px')
						}
					}
				});


				// 监听指定Dom元素 大小变化, 类型为边框盒子
				// console.log('开始监听');
				resizeObserver.observe(this.$refs.shortcut, {
					box: 'border-box'
				})
				if (Destroy) { //为true 销毁监听器
					// console.log('销毁了');
					resizeObserver.unobserve(this.$refs.shortcut);
					return
				}
				//resizeObserver.unobserve(this.$refs.shortcut);


			},

		},

		mounted() {
			this.getShortcutWidth()
			// window.addEventListener('resize', this.getShortcutWidth)
			this.getDate();
			this.init();
			this.cread()
			this.getMessage()
			this.httpOverviewAuthority()

		},

		beforeDestroy() {
			// 传true销毁监听器
			this.getShortcutWidth(true)


		},
	};
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		justify-content: space-between;

		.mainLeft {
			flex: 1;
			height: 590.8px;
			background-color: #fff;
			margin-right: 20px;
			padding: 20px 30px;
			min-width: 520px;

			.shortcut {
				display: flex;
				width: 100%;

				flex-wrap: wrap;

				.shortcut_itemBox {
					display: inline-block;

					.shortcut_item {
						width: var(--ShortcutItemWidth);
						display: flex;
						align-items: center;
						height: 141.5px;

						justify-content: center;

						>.shortcut_item_btn {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							width: 88px;
							height: 88px;
							cursor: pointer;




							&:hover {
								background-color: #eaf5fd;
								transition: 0.3s;
							}

							>.iconStyle {
								margin-bottom: 9px;
								font-size: 43px;
								position: relative;

								.badge {
									background-color: #F5222D;
									width: 18px;
									height: 18px;
									border-radius: 50%;
									display: flex;
									justify-content: center;
									align-items: center;
									position: absolute;
									right: -9px;
									top: -9px;

									.badgeText {
										color: #fff;
										font-size: 20px;
										transform: scale(0.5);
									}

								}
							}

							>span {
								color: #262626;
								font-size: 12px;
							}
						}
					}

				}

			}

			>.picBox {
				height: 200px;
				width: 100%;
				background-image: url("@/assets/img/welcome@2x.png");
				background-size: 100% 200px;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;

				>.welcomeInfo {
					display: flex;
					flex-direction: column;
					margin-left: 40px;

					.name {
						font-size: 24px;
						color: #fff;
						margin-bottom: 13px;
					}

					.text {
						font-size: 14px;
						color: #fff;
					}
				}
			}

			.title_box {
				height: 42px;
				width: 100%;
				border-bottom: 1px solid #f0f0f0;
				line-height: 42px;
				margin-top: 35px;

				.title {
					font-size: 14px;
					font-weight: bold;
					color: #262626;
					height: 42px;

					&.before::before {
						content: " ";
						width: 3px;
						display: inline-block;
						height: 16px;
						background-color: #1890ff;
						margin-right: 8px;
						position: relative;
						top: 3px;
					}
				}
			}
		}

		.mainRight {
			width: 285px;
			height: 590.8px;

			>.timeBox {
				width: 285px;
				height: 177px;
				background-color: #fff;
				margin-bottom: 18px;
				display: flex;
				justify-content: center;
				align-items: center;

				>.dateTimeBox {
					display: flex;
					flex-direction: column;
					align-items: center;

					>.hour {
						color: #1890ff;
						font-size: 60px;
						font-weight: bold;
					}

					>.date {
						color: #262626;
						font-size: 14px;
						font-weight: 600;
					}
				}
			}

			>.noticeBox {
				width: 285px;
				height: 395.8px;
				background-color: #fff;
				padding: 18px 31px 42px;

				>.noticeTitle {
					height: 42px;
					width: 100%;
					border-bottom: 1px solid #f0f0f0;
					line-height: 42px;
					font-size: 14px;
					font-weight: bold;
					color: #262626;

					&.before::before {
						content: " ";
						width: 3px;
						display: inline-block;
						height: 16px;
						background-color: #1890ff;
						margin-right: 8px;
						position: relative;
						top: 3px;
					}
				}

				>.list {
					margin-top: 12.5px;
					width: 223px;
					display: flex;
					flex-direction: column;
					height: 280px;

					>.message {
						width: 223px;
						display: flex;
						justify-content: space-between;
						cursor: pointer;
						transition: 0.2s;

						&:hover {
							opacity: 0.8;
							background-color: #f5f5f5;
						}

						>.messageTitle {
							color: #262626;
							font-size: 12px;
							width: 129px;
							height: 28px;
							line-height: 28px;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						>.yearMonth {
							color: #c3c3c3;
							font-size: 12px;
							line-height: 28px;
						}
					}
				}
			}
		}
	}
</style>